<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="keywords" content="html5, html 5, video, audio, html5video, html 5 video, html 5 audio, flash, h.264, h264, mp4, mp3, wav, aac, web, internet"/>
        <meta name="description" content="The html5media project enables HTML5 video and audio tags in all major browsers. All it takes is a single line of code."/>
        <title>HTML5 video and audio tags in all major browsers</title>
        
        <link rel="stylesheet" href="../media/styles.css"/>
        
        <!-- This line is all you need to enable HTML5 video and audio tags in all major browsers! -->
        <script src="../api/html5media.js"></script>
        
        <!-- This line enables all the other HTML5 elements in IE. It's not necessary if you just want to play video. -->
        <!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->
        
        <script type="text/javascript">

          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-24462944-1']);
          _gaq.push(['_trackPageview']);

          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();

        </script>
        
    </head>
    <body>
        <header id="header">
            <hgroup>
                <h1><a href="http://html5media.info/">HTML5 video was meant to be this easy</a></h1>
                <h2>html5media enables &lt;video&gt; and &lt;audio&gt; tags in all major browsers</h2>
            </hgroup>
        </header>
        <div id="content">
            <article>
                <header>
                    <h1>Video &amp; Audio tag tests</h1>
                </header>
                
                <p>This page contains a series of tests to determine html5media's performance in a variety of
                common deployment scenarios.</p>
            
                <h2>MP4 with OGG fallback</h2>
                <div class="grid_8 alpha">
                    <video class="video" poster="../media/poster.jpg" width="618" height="347" controls preload>
                        <source src="../media/video.mp4" media="only screen and (min-device-width: 568px)"></source>
                        <source src="../media/video.iphone.mp4" media="only screen and (max-device-width: 568px)"></source>
                        <source src="../media/video.ogv"></source>
                    </video>
                </div>
                <div class="grid_4 omega">
                    <audio class="audio" controls preload>
                        <source src="../media/audio.mp3"></source>
                        <source src="../media/audio.ogg"></source>
                    </audio>
                </div>
                <div class="clear"></div>
            
                <h2>MP4 with WEBM fallback</h2>
                <div class="grid_8 alpha">
                    <video class="video" poster="../media/poster.jpg" width="618" height="347" controls preload>
                        <source src="../media/video.mp4" media="only screen and (min-device-width: 568px)"></source>
                        <source src="../media/video.iphone.mp4" media="only screen and (max-device-width: 568px)"></source>
                        <source src="../media/video.webm"></source>
                    </video>
                </div>
                <div class="clear"></div>
            
                <h2>MP4 with no fallback</h2>
                <div class="grid_8 alpha">
                    <video class="video" src="../media/video.mp4" poster="../media/poster.jpg" width="618" height="347" controls preload></video>
                </div>
                <div class="grid_4 omega">
                    <audio class="audio" src="../media/audio.mp3" controls preload></audio>
                </div>
                <div class="clear"></div>
            
                <h2>No preloading</h2>
                <div class="grid_8 alpha">
                    <video class="video" src="../media/video.mp4" poster="../media/poster.jpg" width="618" height="347" controls></video>
                </div>
                <div class="grid_4 omega">
                    <audio class="audio" src="../media/audio.mp3" controls></audio>
                </div>
                <div class="clear"></div>
            
                <h2>No controls</h2>
                <div class="grid_8 alpha">
                    <video class="video" src="../media/video.mp4" poster="../media/poster.jpg" width="618" height="347" preload></video>
                </div>
                <div class="grid_4 omega">
                    <audio class="audio" src="../media/audio.mp3" preload></audio>
                </div>
                <div class="clear"></div>
            
                <h2>Looping</h2>
                <div class="grid_8 alpha">
                    <video class="video" src="../media/video.mp4" poster="../media/poster.jpg" width="618" height="347" controls preload loop></video>
                </div>
                <div class="grid_4 omega">
                    <audio class="audio" src="../media/audio.mp3" controls preload loop></audio>
                </div>
                <div class="clear"></div>
            </article>
        </div>
        <footer>
            <div id="footer-content">
                <p>Developed by <a href="http://www.etianen.com/" title="Developed by Dave Hall">Dave Hall</a>.</p>
                <p>Video content © Blender Foundation <a title="Video content by the Blender Foundation" href="http://www.sintel.org/">www.sintel.org</a><br>
                and licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license.</p>
                <p>Audio content © Jan Morgenstern<br>
                and licensed under the <a title="Audio content by Jan Morgenstern" href="http://creativecommons.org/licenses/by-nc-nd/3.0/">CC-BY-NC-ND 3.0</a> license.</p>
            </div>
        </footer>
    </body>
</html>